import React, { useState } from 'react'
import { Layout, Drawer, Button } from 'antd'
import { MenuOutlined } from '@ant-design/icons'
import { Outlet } from 'react-router-dom'
import Header from '@/components/layout/Header/Header'
import Sidebar from '@/components/layout/Sidebar'
import Footer from '@/components/layout/Footer'

const { Content } = Layout

const MobileLayout: React.FC = () => {
  const [drawerVisible, setDrawerVisible] = useState(false)

  return (
    <Layout className="min-h-screen">
      <Header />
      <Layout style={{ marginTop: 64 }}>
        <Button
          type="text"
          icon={<MenuOutlined />}
          onClick={() => setDrawerVisible(true)}
          className="fixed left-4 top-20 z-50 bg-white shadow-md rounded-full w-10 h-10 flex items-center justify-center md:hidden"
        />
        
        <Drawer
          placement="left"
          closable={false}
          onClose={() => setDrawerVisible(false)}
          open={drawerVisible}
          width={250}
          bodyStyle={{ padding: 0 }}
          className="md:hidden"
        >
          <Sidebar collapsed={false} onCollapse={() => {}} />
        </Drawer>

        <Layout className="bg-gray-50">
          <Content className="p-4">
            <div className="bg-white rounded-lg min-h-[calc(100vh-96px)]">
              <Outlet />
            </div>
          </Content>
          <Footer />
        </Layout>
      </Layout>
    </Layout>
  )
}

export default MobileLayout